<template>
  <div class="file-list-container">
    <div class="file-list-bg">
      <div class="file-list-layout">
        <div class="file-list-item" v-for="(item, index) in fileList">
          <span @click="downloadFile(index)" class="file-list-item-text">{{item.filename}}</span>
          <i :style="{cursor: 'pointer'}" @click="deleteFile(index)" class="iconfont icon-delete file-list-item-delete-icon"/>
        </div>
      </div>
      <div class="file-list-pagination-container">
        <el-pagination
          background
          @current-change="pageChange"
          layout="prev, pager, next"
          :total="fileCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

  import {getDownloadUrl, getFileListByPage} from "../../api";
  import {deleteFile} from "../../api/paper";

  export default {
    name: 'file-list',
    data() {
      return {
        fileCount: 0,
        fileList: []
      }
    },
    methods: {
      pageChange(page) {
        this.setFileList(page)
      },
      downloadFile(index) {
        const data = {
          filename: this.fileList[index].filename,
          filepath: this.fileList[index].filepath
        }
        getDownloadUrl(data).then(res => {
          window.open(res.data)
        })
      },
      setFileList(page) {
        const data = {
          page: page
        }
        getFileListByPage(data).then(res => {
          console.log(res)
          this.fileList = res.data.fileList;
          this.fileCount = parseInt(res.data.count)
        })
      },
      deleteFile(index) {
        let data = {
          id: this.fileList[index].id,
          filepath: this.fileList[index].filepath
        }
        deleteFile(data).then(res => {
          this.$message.success("删除成功")
          this.fileList.splice(index)
        })
      },
    },
    mounted() {
      this.setFileList(1);
    }
  }
</script>

<style lang="scss" scoped>
  .file-list {
    &-container {
      margin: 15px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
    &-bg {
      background-color: white;
      border-radius: 5px;
      padding: 10px 0 10px 10px;
    }
    &-layout {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }
    &-item {
      width: 23%;
      margin-right: 1%;
      margin-bottom: 10px;
      &-delete-icon {
        position: relative;
        top: 2px;
      }
      &-text {
        color: #20a0ff;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    &-pagination-container {
      text-align: center;
    }
  }
</style>
